<template>
  <div class="my">
    <!-- <tabber></tabber> -->
    <div class="header">
        <div class="header_box">
            <image :src="headerImg" alt=""/>
            <div class="name">{{name}}</div>
            <div class="tel">136****0325</div>
        </div>
    </div>
    <div class="all_order" @click="open_order">
        <div class="all_order_l">全部订单</div>
        <image class="all_order_r" src="/static/images/more.png" alt=""/>
    </div>
    <div class="list">
        <div class="list_box" v-for="(item,index) in list" :key="index" @click="child_order(index)">
             <image :src="item.img" alt=""/>
             <div>{{item.title}}</div>
        </div>
    </div>
    <div class="change">
        <div class="change_list" v-for="(key,id) in change_list" :key="id" @click="change(id)">
            <image class="change_img" :src="key.img" alt=""/>
            <div class="change_list_r" :style="id==3?'border:none':''">
              <div class="title">{{key.title}}</div>
              <image class="more" src="/static/images/more.png" alt=""/>
            </div>
        </div>
    </div>
   
  <vue-tab-bar @fetch-index="clickIndexNav" :selectNavIndex=2 :needButton="needButton" :handButton="handButton" :btnText="btnText"></vue-tab-bar>
  </div>
</template>

<script> 
import vueTabBar from '../../components/tabber/index'
export default {
   components:{
    vueTabBar
  },
  data () {
    return {
      name:'', //名字
      headerImg:'',  //头像
      list:[{img:'/static/images/pending_payment.png',title:'待付款'},{img:'/static/images/wait_for_delivery.png',title:'待发货'},
            {img:'/static/images/waiting_for_receipt.png',title:'待收货'},{img:'/static/images/waiting_for_evaluation.png',title:'待评价'},
            {img:'/static/images/thh.png',title:'售后'}],
      change_list:[{img:'/static/images/my_collection.png',title:'我的收藏'},{img:'/static/images/purchase_history.png',title:'购买记录'},{img:'/static/images/shdzgl.png',title:'收货地址'},{img:'/static/images/feedback.png',title:'意见投诉'}]      
    }
  },
  methods: {
    open_order(){
      let id = 4
      wx.navigateTo({ 
        url: '/pages/order/main?id='+id
      })
    },
    child_order(index){
      if(index<4){
        wx.navigateTo({ 
          url: '/pages/order/main?id='+index
        })
      }else{
        wx.navigateTo({ 
          url: '/pages/afterSale/main?id='+index
        })
      }
     
    },
    change(id){
      switch (id) {
        case 0:
          wx.navigateTo({ 
            url: '/pages/collection/main'
          })
          break;
        case 1:
          wx.navigateTo({ 
            url: '/pages/record/main'
          })
          break;
        case 2:
          wx.navigateTo({ 
            url: '/pages/address/main'
          })
          break;
        case 3:
          wx.navigateTo({ 
            url: '/pages/opinion/main'
          })
          break;    
        default:
          break;
      }
    },
    lost(){
        wx.reLaunch({
          url:'/pages/login/main'
        })
    }
  },
  onLoad(){
    var that = this
    wx.getUserInfo({
      success: function(res) {
        console.log(res,'33333')
        if(res.errMsg=='getUserInfo:ok'){
          that.name = res.userInfo.nickName
          that.headerImg = res.userInfo.avatarUrl
        }
      }
    })
    
  },

  created () {
    // let app = getApp()
  }
}
</script>

<style scoped lang="less">
  .my{
    width: 100%;
    height: 100%;
    background: #f5f5f5;
    position: absolute;
    .header{
      width: 100%;
      height: 276rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 26rpx;
      color: #707070FF;
      .header_box{
        height: 202rpx;
        width: 200rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        image{
          width: 130rpx;
          height: 130rpx;
          border-radius: 50%;
        }
        .name{

        }
      }
    }
    .all_order{
      width: 100%;
      height: 86rpx;
      padding: 0 30rpx;
      box-sizing: border-box;
      font-size: 24rpx;
      color: #707070;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #fff;
      .all_order_r{
        width: 18rpx;
        height: 32rpx;
      }
    }
    .list{
      width: 100%;
      height: 156rpx;
      padding: 0 64rpx;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #fff;
      border-top: 2rpx solid #ccc;
      margin-bottom: 20rpx;
      .list_box{
        width: 78rpx;
        height: 84rpx;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: space-between;
        color: #707070;
        font-size: 26rpx;
        image{
          width: 44rpx;
          height: 44rpx;
        }
      }
    }
    .change{
      width: 100%;
      padding: 14rpx 0rpx 12rpx 30rpx;
      box-sizing: border-box;
      color: #707070;
      font-size: 26rpx;
      background: #fff;
      .change_list{
        width: 100%;
        height: 72rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .change_img{
          width: 36rpx;
          height: 36rpx;
        }
        .change_list_r{
          width: 656rpx;
           height: 72rpx;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding-right: 30rpx;
          box-sizing: border-box;
          border-bottom:2rpx solid rgba(204,204,204,1);
          .more{
              width: 18rpx;
              height: 32rpx;
          }
        }
      }
    }
    .lost{
      width: 200rpx;
      height: 100rpx;
      line-height: 100rpx;
      text-align: center;
      color: #fff;
      background: red;
    }
  }
 
</style>
